<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view>
    <view class="index">
      <page-bg></page-bg>

      <!--顶部-->
      <u-navbar
          :safeAreaInsetTop="false"
          :placeholder="false"
          :is-back="false"
          :is-fixed="true"
          :title="'专区'"
          :border-bottom="false"
          :title-bold="true"
          :title-color="'#111111'"
          :background="{ background : navBg }"
      >
      </u-navbar>

      <view>
        <tabs
            :current="navCurrent"
            @change="navChange"
            bar-width="60"
            :isScroll="true"
            :activeColor="'#111'"
            :bgColor="'transparent'"
            :stickyBgColor="'transparent'"
            :fontSize="34"
            :height="80"
            :bold="true"
            :inactiveColor="'#888'"
            :barStyle="{
          bottom: '-8rpx',
          height: '8rpx',
          borderRadius: '8rpx',
          backgroundColor: 'transparent',
          backgroundImage: 'linear-gradient(to right, var(--color-primary), var(--color-minor))'
        }"
        >
          <view class="page-sort">
            <view class="sort-list">
              <view class="list-item" @click="showSortFuc('home_class',false,true)">
                <view class="item-name page-line1">排序</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
              <view class="list-item" @click="showSortFuc('age','multiSelector',true)">
                <view class="item-name page-line1">{{ filterData.age ? filterData.age + '岁' : '年龄' }}</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
              <view class="list-item" @click="showSortFuc('height','multiSelector',true)">
                <view class="item-name page-line1">{{ filterData.height ? filterData.height + 'cm' : '身高' }}</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
              <view class="list-item" @click="showMorePop = true">
                <view class="item-name">更多</view>
                <u-icon color="#fff" size="24" name="arrow-down"></u-icon>
              </view>
            </view>
          </view>
          <tab v-for="(item, i) in navList" :key="i" :name="item.name">
            <view class="news-list">
              <view class="px-[30rpx]">
                <w-blind-date-list ref="blindListRef" :reload="reload" :filter="filterData" :cid="item.id" :list_calss="navList[navCurrent].list_calss"
                                   :i="i" :index="navCurrent"></w-blind-date-list>
              </view>
            </view>
          </tab>
        </tabs>

      </view>

      <!-- 返回顶部按钮 -->
      <u-back-top
          :scroll-top="scrollTop"
          :top="100"
          :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
      >
      </u-back-top>

      <!--更多筛选弹窗-->
      <u-popup v-model="showMorePop" mode="right" border-radius="40">
        <u-navbar
            :safeAreaInsetTop="false"
            :placeholder="false"
            :is-back="false"
            :is-fixed="true"
            :border-bottom="false"
            :title-bold="true"
            :title-color="'#111111'"
            :background="{ background : '#fff' }"
        >
          <template #default>
            <view class="page-title">嘉宾筛选</view>
          </template>
        </u-navbar>

        <view class="page-side">
          <view class="side-con">
            <!--            <view class="side-title">-->
            <!--              嘉宾筛选-->
            <!--            </view>-->
            <view class="side-search">
              <u-icon class="search-icon" size="30" color="#CACACA" name="search"></u-icon>
              <input v-model="filterData.nickname" class="search-input" type="text" placeholder="请输入关键词搜索">
<!--              <view class="search-btn">-->
<!--                <u-icon size="30" color="#fff" name="search"></u-icon>-->
<!--              </view>-->
            </view>
            <view class="side-list">
              <view class="list-one" @click="showSortFuc(item.string,item.selectorType,false)"
                    v-for="(item,index) in sideList" :key="index">
                <view class="one-title">
                  <span>{{ item.name }}</span>
                  <span class="title-text">{{ filterData[item.string] }}</span>
                </view>
                <u-icon size="28" color="#999" name="arrow-right" class="one-icon"></u-icon>
              </view>
            </view>
            <view class="side-bottom">
              <view @click="initState" class="bottom-btn">
                重置
              </view>
              <view @click="confirmForm" class="bottom-btn bottom-btnActive">
                确定
              </view>
            </view>
          </view>

        </view>
      </u-popup>

      <!--筛选-->
      <u-picker @confirm="sortConfirm" confirmColor="" :mode="selectorType" v-model="showSort" :default-selector="[0]"
                :range="selectorSort"
                range-key="cateName"></u-picker>

      <tabbar/>
    </view>

  </view>

</template>
<script setup lang="ts">
import {computed, reactive, ref, shallowRef} from "vue";
import {getDictData} from "@/utils/dictionary";
import MpPrivacyPopup from "@/pages/index/component/mp-privacy-popup.vue";
import {onLoad, onPageScroll} from "@dcloudio/uni-app";

const dictData = ref()
onLoad(async () => {
  dictData.value = await getDictData()
})

const addressData = (e:any) => {
  console.log('e',e)
  // this.workplace = e.province.name + e.city.name + e.area.name
}

const scrollTop = ref<number>(0)
const navBg = ref<string>('rgba(255,255,255,0)')
const showSort = ref(false)
const showMorePop = ref(false)

const stateForm = () =>( {
  home_class: '',
  nickname: '',
  age: '',
  height: '',
  weight: '',
  workplace: '',
  marriage: '',
  nation: '',
  work: '',
  jtqk: '',
  education: '',
  income: '',
})

const filterData: any = ref(stateForm())

// 重置
const initState = () => {
  Object.assign(filterData.value, stateForm())
  confirmForm()
}

const blindListRef = shallowRef<any>(null)

const reload = ref(0)

const confirmForm = () => {
  reload.value +=1
  showMorePop.value = false
}

let selectorType = ref('selector')

const navCurrent = ref(0)
const selectorSort: any = ref([])

const navList = ref([
  {
    name: '全部',
    id: '',
    list_calss: 0
  },
  {
    name: '教师专区',
    id: 1,
    list_calss: 1
  },
  {
    name: '高薪专区',
    id: 2,
    list_calss: 2
  },
  {
    name: '企政专区',
    list_calss: 3
  },
  {
    name: '其他',
    list_calss: 0
  }
])
const sideList = ref([
  {
    name: '年龄范围',
    id: '',
    string: 'age',
    selectorType: 'multiSelector'
  },
  {
    name: '身高范围',
    id: 1,
    string: 'height',
    selectorType: 'multiSelector'
  },
  {
    name: '体重范围',
    id: 2,
    string: 'weight',
    selectorType: 'multiSelector'
  },
  {
    name: '工作地区',
    string: 'workplace',
    selectorType: 'region'
  },
  {
    name: '婚姻史',
    string: 'marriage',
  },
  {
    name: '民族',
    string: 'nation',
  },
  {
    name: '工作',
    string: 'work',
  },
  {
    name: '最低学历',
    string: 'education'
  },
  {
    name: '最低月收入',
    string: 'income'
  }
])

const navChange = (item: any) => {
  navCurrent.value = item
}

onPageScroll((event: any) => {
  scrollTop.value = event.scrollTop
  const top = uni.upx2px(100)
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})

let stringVal = ref({
  string: '',
  selectorType: '',
  isConfirm: false
})

const showSortFuc = (string: any, type: any,isConfirm:any) => {
  // 需要提交的income在数据字典中叫做monthly_income
  // 所以需要在渲染选择器数据的时候将传进来的string变量改为'monthly_income'字符串
  if (string == 'income') {
    selectorSort.value = dictData.value['monthly_income']
  } else {
    selectorSort.value = dictData.value[string]
  }
  if (type) {
    selectorType.value = type
    stringVal.value.selectorType = type
    selectorSort.value = [
      dictData.value[string],
      ['-'],
      dictData.value[string]
    ]
  } else {
    selectorType.value = 'selector'
  }
  showSort.value = true
  stringVal.value.string = string
  stringVal.value.isConfirm = isConfirm

  console.log('selectorSort.value', selectorSort.value)
}

// 筛选选择器点击确定
const sortConfirm = (e: any) => {
  // 多列模式点击确定
  if (stringVal.value.selectorType === 'multiSelector') {
    if (e.length == 1) {
      filterData.value[stringVal.value.string] = selectorSort.value[0][e[0]] + selectorSort.value[1][0] + selectorSort.value[2][0]
    } else {
      filterData.value[stringVal.value.string] = selectorSort.value[0][e[0]] + selectorSort.value[1][0] + selectorSort.value[2][e[2]]

    }
  } else {
    // 地图模式点击确定
    if (stringVal.value.selectorType === 'region') {
      filterData.value[stringVal.value.string] = e.province.name + '-' + e.city.name + '-' + e.area.name
    } else {
      // 其他模式点击确定
      filterData.value[stringVal.value.string] = selectorSort.value[e]
      if (stringVal.value.string == 'home_class') {
        filterData.value[stringVal.value.string] = selectorSort.value[e[0]].id
      }
    }
  }
  if (stringVal.value.isConfirm) {
    confirmForm()
  }
}
</script>
<style scoped lang="scss">
page{
  background: linear-gradient( 180deg,#ebe9fe 0%, #FFFDFF 15%, #FFE4FC 100%);
}
.index {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.page-sort {
  .sort-list {
    // width: calc(100% - 60rpx);
    margin: 20rpx auto;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 20rpx;
    border-radius: 40rpx;
    // box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .list-item {
      font-size: 26rpx;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24rpx 10rpx;

      .item-name {
        margin-right: 6rpx;
      }
    }
  }
}

.page-side {
  width: 80vw;

  .side-con {
    padding: 0 30rpx;
  }

  .side-title {
    font-size: 40rpx;
    color: #111111;
    font-weight: bold;
  }

  .side-search {
    width: 100%;
    margin-top: 20rpx;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;
    background-color: #F0F7FF;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .search-input {
      width: 100%;
      padding: 0 30rpx;
      font-size: 30rpx;
      color: #333333;
      line-height: 30rpx;
      height: 30rpx;
    }

    .search-icon {
      padding-right: 20rpx;
      border-right: 1rpx solid #CACACA;
    }

    .search-btn {
      width: 100rpx;
      height: 50rpx;
      border-radius: 40rpx;
      background-image: linear-gradient(to top, var(--color-primary), var(--color-minor));
      text-align: center;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .side-list {
    margin-top: 20rpx;
    padding-bottom: calc(140rpx + env(safe-area-inset-bottom));

    .list-one {
      width: 100%;
      padding: 26rpx 0;
      border-bottom: 2rpx solid #E8E8E8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #111111;
      font-size: 30rpx;

      .one-title {
        .title-text {
          margin-left: 10rpx;
          color: var(--color-primary);
        }
      }
    }
  }

  .side-bottom {
    width: 100%;
    right: 0;
    padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;

    .bottom-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      background-color: #F0F7FF;
      color: #999999;

      &Active {
        background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
        color: #ffffff;
      }
    }
  }
}

.page-title {
  padding: 0 30rpx;
  text-align: left;
  font-size: 40rpx;
  color: #111111;
  font-weight: bold;
}
</style>